<template>
  <el-card>
    <h2>主页</h2>
    <p>欢迎，{{ username }}</p>
    <el-button type="primary" @click="logout">退出登录</el-button>
    <p>页面已加载次数：{{ count }}</p>
    <el-button type="danger" @click="adminLogin">管理员登录</el-button>
  </el-card>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

const username = computed(() => store.state.username)
const count = computed(() => store.state.count)

onMounted(() => {
  store.commit('increment')
})

function logout() {
  store.commit('logout')
  router.push('/login')
}

function adminLogin() {
  router.push('/admin/login')
}
</script>
